<template>
	<van-button
		:class="{ ...curClassName, 'ghost-button': buttonGhost }"
		:style="curStyle"
		:type="buttonType"
		:disabled="disabled"
		:title="curTooltip"
		:class="{ 'ghost-button': buttonGhost }"
		@click="handleClick"
	>
		<div :class="['button-content', iconAlign.toLowerCase()]">
			<span v-if="cssClass || imagePath" class="icon">
				<i v-if="cssClass" :class="cssClass" />
				<img v-else :src="imagePath" />
			</span>
			<span v-if="showCaption" class="caption">{{ curCaption }}</span>
		</div>
	</van-button>
</template>
<script setup lang="ts">
import { PresetButtonProps } from './preset-button';
import { IEvent } from '@/core';
const props = defineProps(PresetButtonProps);

interface PrestButtonEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<PrestButtonEmit>();

/**
 * 项名称
 *
 * @memberof AppPresetButton
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 显示标题
 *
 * @memberof AppPresetButton
 */
const showCaption = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.isShowCaption;
	}
});

/**
 * 标题
 *
 * @memberof AppPresetButton
 */
const curCaption = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.caption;
	}
});

/**
 * 提示信息
 *
 * @memberof AppPresetButton
 */
const curTooltip = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.tooltip;
	}
});

/**
 * 类名
 *
 * @memberof AppPresetButton
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {};
	if (layoutModel) {
		const uiAction = layoutModel.uiAction;
		switch (uiAction?.predefinedType) {
			case 'APP_LOGIN':
				Object.assign(classNames, { 'app-login-button': true });
				break;
			case 'DATA_CANCELCHANGES':
				Object.assign(classNames, { 'app-reset-button': true });
				break;
			case 'APP_LOGOUT':
				Object.assign(classNames, { 'app-logout-button': true });
				break;
			default:
				Object.assign(classNames, { 'app-preset-button': true });
				break;
		};
		switch(layoutModel.caption){
			case '无边框':
				Object.assign(classNames, { 'border--none': true });
				break;
			case '反向按钮':
				Object.assign(classNames, { 'background--reversing-button': true })
		};
		Object.assign(classNames, layoutModel.getClassNames());
	};
	return classNames;
});

/**
 * 图片路径
 *
 * @memberof AppPresetButton
 */
const imagePath = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let imagePath = '';
		if (layoutModel.sysImage) {
			imagePath = layoutModel.sysImage.imagePath;
		} else if (layoutModel.uiAction) {
			imagePath = layoutModel.uiAction.imagePath;
		}
		return imagePath;
	}
});

/**
 * 图标
 *
 * @memberof AppPresetButton
 */
const cssClass = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let cssClass = '';
		if (layoutModel.sysImage) {
			cssClass = layoutModel.sysImage.iconcls;
		} else if (layoutModel.uiAction) {
			cssClass = layoutModel.uiAction.iconcls;
		}
		return cssClass;
	}
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetButton
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 禁用
 *
 * @memberof AppPresetButton
 */
const disabled = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.disabled;
	}
});

/**
 * 按钮类型
 *
 * @memberof AppPresetButton
 */
const buttonType = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		if (Object.is(layoutModel.renderMode, 'LINK')) {
			return 'text';
		} else {
			if (
				Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
				Object.is(layoutModel.buttonStyle, 'STYLE2') ||
				Object.is(layoutModel.buttonStyle, 'STYLE3') ||
				Object.is(layoutModel.buttonStyle, 'STYLE4')
			) {
				return 'default';
			} else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
				return 'primary';
			} else {
				return layoutModel.buttonStyle.toLowerCase();
			};
		};
	};
});

/**
 * 图标方向
 *
 * @memberof AppPresetButton
 */
const iconAlign = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.iconAlign || 'LEFT';
	} else {
		return 'LEFT';
	}
});

/**
 * 按钮幽灵属性，使按钮背景透明
 *
 * @memberof AppPresetButton
 */
const buttonGhost = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return Object.is(layoutModel.buttonStyle, 'INVERSE');
	}
});

/**
 * 点击按钮
 *
 * @param {*} event
 * @memberof AppPresetButton
 */
const handleClick = ($event: MouseEvent) => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel.uiAction) {
		emit('component-action', {
			name: props.name,
			action: 'panelButtonAction',
			data: $event,
		});
	}
};
</script>